<template>
  <div id="type">
    <div id="type_left">
      <div class="type_left_top">
        <div>
          <img :src="require('../../assets/icon/'+ typeName + '.png')" width="20px" height="20px;">
        </div>
        <div style="margin-left:10px;">
          <h2 :id="typeName">{{typeName}}</h2>
        </div>
        <Button type="text">换一批</Button>
      </div>
      <div class="type_left_body">
        <div id="video_info" v-for="video in videos" :key="video.id">
          <!--视频封面-->
          <div class="video_cover" @click="toPlay(video.id)">
            <img src="../../assets/images/register-background.jpeg" width="200px" height="130px">
          </div>
          <div class="video_introduce">
            {{video.introduce}}
          </div>
          <div class="upInfo" @click="toUp_Home(video)">
            <div><img src="../../assets/images/avatar.jpg" width="15px" height="15px"></div>
            <div style="margin-left:5px;">{{nickName}}</div>
          </div>
        </div>
      </div>
    </div>
    <div id="type_right">
      <div class="type_right_top">
        <h2>排行榜</h2>
        <Button>更多</Button>
      </div>
      <div class="type_right_body">
        <div class="single_rank" v-for="r in rank" :key="r.id" @click="toPlay(r.id)">
          {{r.introduce}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import getVideoByType from '../../utils/video'
import getNickNameByUpId from '../../utils/video'
export default {
  name: "TypeDetail",
  props:['typeName'],
  data(){
    return{
      nickName:'sky',
      videos:[],
      typeIconUrl:'../../assets/icon/体育.png',
      rank:[{id:'1',introduce:'排行榜视频1',nickName:'发布者昵称',upId:'1'},
        {id:'2',introduce:'排行榜视频2',nickName:'发布者昵称',upId:'1'},
        {id:'3',introduce:'排行榜视频3',nickName:'发布者昵称',upId:'1'},
        {id:'4',introduce:'排行榜视频4',nickName:'发布者昵称',upId:'1'},
        {id:'5',introduce:'排行榜视频5',nickName:'发布者昵称',upId:'1'},
        {id:'6',introduce:'排行榜视频6',nickName:'发布者昵称',upId:'1'},
        {id:'7',introduce:'排行榜视频7',nickName:'发布者昵称',upId:'1'},
        {id:'8',introduce:'排行榜视频8',nickName:'发布者昵称',upId:'1'},
        {id:'9',introduce:'排行榜视频9',nickName:'发布者昵称',upId:'1'},
        {id:'10',introduce:'排行榜视频10',nickName:'发布者昵称',upId:'1'},
      ]
    }
  },
  methods:{
    //跳转至视频详情页
    toPlay(video){
      const { href } = this.$router.resolve({
        path:'/play',
        query: {
          id:video
        }
      });
      window.open(href, '_blank');
    },
    //跳转至up空间主页
    toUp_Home(upId){
      const { href } = this.$router.resolve({
        path:'/up_home',
        query: {
          upId: upId
        }
      });
      window.open(href, '_blank');
    }
  },
  mounted(){
    //  ../../assets/images/cover1.jpg
    this.typeIconUrl = '../../assets/icon/' + this.typeName +'.png'
    //从vuex获取视频数据
    let videoList = this.$store.state.videos
    if(this.typeName === '其它'){
      this.videos = videoList
    }else{
      //数据处理
      let data = getVideoByType(videoList,this.typeName)
      this.videos = data
    }
    //设置typeDetail一次最多渲染八条数据
    let length = this.videos.length
    let temp = this.videos
    if(length > 8){
      temp.splice(8,length-8)
      this.videos = temp
    }

  }


}
</script>

<style scoped>

#type{
  display:flex;
  flex-direction:row;
  width:100%;
  height:475px;
  margin-top:5px;
}

#type_left{
  width:70%;
  border-right:1px solid red;
}

.type_left_top{
  height:50px;
  line-height:50px;
  display:flex;
  flex-direction:row;
}
.type_left_top Button{
  position:relative;
  border-radius:50%;
  left:700px;
  top:10px;
  font-size:10px;
  padding:0px 5px;
}

.type_left_body{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}

#video_info{
  width:25%;
  height:210px;
  padding-left:5px;
  margin-bottom:2px;
}

.video_cover{
  width:100%;
  height:130px;
}

.video_introduce{
  font-size:15px;
  height:40px;
  line-height:20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.video_introduce:hover{
  color:mediumblue;
}
.upInfo{
  display:flex;
  flex-direction:row;
  align-items:center;
  font-size:12px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;

}

.upInfo:hover{
  color:mediumblue;
}

#type_right{
  width:30%;
  padding-left:1%;
}
.type_right_top{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
.type_right_body{
  padding-left:10px;
}
.single_rank{
  height:38px;
  line-height:38px;
  margin-top:5px;
}
.single_rank:hover{
  background-color:#13227a;
  color:white;
}







</style>